import { t } from 'i18next'
import { Input } from '@kedacom/react-next'
import SelectedList from './list'
import { StyledWrap } from './style'
import { IconAdd } from '../../components/Icons'
import { useSearch } from './hooks'
import { useMtAddStore } from '../../store'
import { useSelectedStore } from './store'

function Selected() {
	const meetingType = useMtAddStore((state) => state.meetingType)
	const listLength = useSelectedStore((state) => state.selectedList.length)
	const [search, searchAction] = useSearch()
	return (
		<StyledWrap>
			<div className="title">
				<span>
					{t('已选')} {listLength}
				</span>
			</div>
			<div className="selected-content">
				<SelectedList />
			</div>
			<div className="search-wrap">
				<div className="input-wrap">
					<Input
						maxLength={128}
						height={24}
						value={search.value}
						placeholder={search.placeholder}
						onKeyUp={searchAction.onKeyUp}
						onChange={searchAction.onChange}
					/>
				</div>
				<IconAdd onClick={searchAction.onAdd} />
			</div>
			{search.error && <div className="search-error">{t('输入非法字符')}</div>}
			{!search.error && meetingType === 2 && (
				<div className="search-sfu-tips">{t('当前会议类型不支持呼叫IP地址')}</div>
			)}
		</StyledWrap>
	)
}
export default Selected
